
import React, { useEffect } from 'react';
import { Button, Col, DatePicker, Form, Input, InputNumber, Modal, Radio, Row, Select, } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import dayjs from 'dayjs';
const { Option } = Select;



type formConfigItem = {
  type: string,
  label: string,
  fieldName: string,
  placeholder?: string
  isDisabled?: boolean
  mode?: string // 下拉框多选  multiple
  allowClear?: boolean //全部清除
  rules?: any[]
  child?: any[] // 下拉框
}

interface BaseGeneraFormType {
  title?: string,
  isPassed?: boolean,
  open: boolean,
  isAdd: boolean,
  footer: any,
  formData?: any
  formDataConfig?: formConfigItem[]
  emitOnFinish: (value: any, isAdd: boolean) => void,
  onOk?: () => void,
  onCancel?: () => void
}

const BaseGeneraForm: React.FC<BaseGeneraFormType> = (props) => {
  const [form] = Form.useForm();

  // useEffect(() => {
  //   console.log('props.formData]', props.formData)
  //   form.setFieldsValue({ ...props.formData })
  //   debugger
  // }, [props.formData])

  useEffect(() => {
    if (props.open === false) {
      form.resetFields()
    }
    if (!props.isAdd) {
      form.setFieldsValue({ ...props.formData })
    } else {
      form.resetFields()
    }
  }, [props.open])

  const onFinish = (fieldsValue: any) => {
    props.emitOnFinish(fieldsValue, props.isAdd)
    if (props.isPassed) {
      form.resetFields()
    }

  }

  return (
    <Modal {...props}>
      <Form
        name="dynamic_form_nest_item"
        style={{ maxWidth: 600 }}
        autoComplete="off"
        form={form}
        onFinish={onFinish}
      >
        {
          props.formDataConfig?.map(config => {

            if (config.type === 'Input') {
              return <Form.Item label={config.label} name={config.fieldName} key={config.fieldName} rules={config.rules}>
                <Input placeholder={config.placeholder} disabled={config.isDisabled} />
              </Form.Item>
            }

            if (config.type === 'InputNumber') {
              return <Form.Item label={config.label} name={config.fieldName} key={config.fieldName} rules={config.rules}>
                <InputNumber placeholder={config.placeholder} parser={text => /^\d+$/.test(text) ? text : 0} disabled={config.isDisabled} />
              </Form.Item>
            }

            if (config.type === 'Select' && config.child) {
              return <Form.Item label={config.label} name={config.fieldName} key={config.fieldName} rules={config.rules} >
                <Select disabled={config.isDisabled} mode={config.mode} allowClear={config.allowClear}>
                  {
                    config.child.map((c) => {
                      return <Option value={c.value} key={c.value}>{c.label}</Option>
                    })
                  }
                </Select>
              </Form.Item>
            }

            if (config.type === 'TextArea') {
              return <Form.Item label={config.label} name={config.fieldName} key={config.fieldName} rules={config.rules}>
                <TextArea placeholder={config.placeholder} disabled={config.isDisabled} />
              </Form.Item>
            }


            if (config.type === 'RangePicker') {
              return <Form.Item label={config.label} name={config.fieldName} key={config.fieldName} rules={config.rules}>
                <DatePicker.RangePicker format="YYYY-MM-DD" />
              </Form.Item>
            }


            if (config.type === 'Radio' && config.child) {
              return <Form.Item label={config.label} name={config.fieldName} key={config.fieldName} rules={config.rules}>
                <Radio.Group  >
                  {
                    config.child.map((c) => {
                      return <Radio value={c.value} key={c.value} disabled={config.isDisabled}>{c.label}</Radio>
                    })
                  }
                </Radio.Group>
              </Form.Item>

            }

          })
        }

        <Form.Item >
          <Row>
            <Col span={12}>
              <Button type="primary" htmlType="submit">
                确认
              </Button>
            </Col>
            <Col span={12}>
              <Button onClick={props.onCancel}>
                取消
              </Button>
            </Col>
          </Row>
        </Form.Item>
      </Form>
    </Modal>
  );
}


export default BaseGeneraForm